<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4513729_4ssikjxik3n.css">
    <link rel="stylesheet" href="./index2.css">
    <style>
        * { 
            margin: 0; 
            padding: 0; 
            border: none; 
            font-family: '楷体';
        }
            a { text-decoration: none; }
            ul { list-style: none; }
        .box {
            display: flow-root;
            width: 500px;
            height: 400px;
            background-color: aliceblue;
            margin: 50px auto;
            text-align: center;
        }
        h1 {
            font-size: 30px;
            margin: 10px;
            margin-bottom: 10px;
        }
        #new-todo {
            height: 30px;
            width: 70%;
            border-radius: 20px;
        }
        .iconfont {
            cursor: pointer;
        }
        .icon-htmal5icon18 {
            font-size: 50px;
            color: blue;
            position: absolute;
            top: -9px;
            left: 434px;
        }
        #todolist>li {
            width: 70%;
            background-color: white;
            height: 50px;
            line-height: 50px;
            margin: 5px auto;
            position: relative;
        }
        .icon-shanchu:hover {
           background-color: red;
           color: white;
        }
        .icon-shanchu {
            font-size: 30px;
            width: 50px;
            position: absolute;
            top: 0;
            right: 0px;
            color: gray;
            
        }
        .abc {
            position: absolute;
            top: 5px;
            left: 0;
           zoom: 2.0;
        }
        .icon-htmal5icon18:hover {
            transform: scale(1.2)
        }
        .box1 {
            position: relative;
        }
        .top-nav li a {
          font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="top-nav">
        <ul>
            <li><a href="./js任务一.html">首页</a></li>
            <li><a href="./轮播图.html">轮播图</a></li>
            <li><a href="https://gitee.com/zxzdkj/web-homework.git">代码仓库</a></li>
        </ul>
    </div>
    <div class="box">
        <h1>待办列表</h1>
      <div class="box1">
          <input id="new-todo" type="text" placeholder="请输入待办事项">
          <span id="logo" class="iconfont icon-htmal5icon18 "></span>
    </div>
    <ul id="todolist"></ul>
    </div>
    <script>
        const todolist =document.getElementById('todolist')
  const newTodo = document.getElementById('new-todo')
  const increase = document.getElementById('logo')
   class  Todo {
    constructor(id,text,completed) {
      this.id=id
      this.text=text
      this.completed=completed
    }
  }
  let todos =[]
  function addTodo() {
    const texts =newTodo.value.trim()
    if(texts==='') {
      return alert('请输入待办事项')
    }
    const list =new Todo(Date.now(),texts,false)
    todos.push(list)
    renderTodos()
    newTodo.value=''
  }
  function deleteTodo(id) {
    let index =todos.findIndex(todo=>todo.id=id)
    if(index!==-1) {
      todos.splice(index,1)
      renderTodos()
    }
  }
  function updateTodoItem(li,todo) {
    li.style.textDecoration =todo.completed ? 'line-through':'none'
    li.style.opacity =todo.completed ? '0.5' : '1'
  }
  function renderTodos() {
    todolist.innerHTML=''
    todos.forEach(todo=> {
      const li =document.createElement('li')
      const checkbox =document.createElement('input')
      checkbox.type='checkbox'
      checkbox.checked=todo.completed
      checkbox.classList.add("abc")
      checkbox.addEventListener('change',()=> {
        todo.completed=checkbox.checked
        updateTodoItem(li,todo)
      })
      const textNode =document.createTextNode(todo.text)
      li.appendChild(textNode)
      li.appendChild(checkbox)
      const deletetBtn =document.createElement('span')
      deletetBtn.classList.add("iconfont","icon-shanchu")
      deletetBtn.addEventListener('click',()=> {
        deleteTodo(todo.id)
      })
      li.appendChild(deletetBtn)
      todolist.appendChild(li)
    })
  }
  increase.addEventListener('click',()=> {
    addTodo()
  })
    </script>
</body>
</html>